import React ,{ useState, useEffect } from 'react'
import './visit_scss/index.css'

//umi 仓库 dva
import { IndexModelState, ConnectProps, Loading, connect } from 'umi';

//删除按钮组件的引入
import { Button, Popover } from 'antd';

type Props = {}

const Index = (props: any) => {
console.log(props);

  const  { dispatch , list } = props
    console.log(list);

    useEffect(()=>{
          dispatch({
            type:'dispatchlist2/visitlist'
          })
    },[])


    const [ inp_inp2 , setinp_inp2 ] = useState(false)
    //按钮
    const [ btnflag ,setbtnflag ] = useState(false)

      let inp2 = (e:any)=>{
        console.log(e.target.checked);

        setinp_inp2(e.target.checked)
        setbtnflag(e.target.checked)
      }

      //全部的监控
      let inp3 = ()=>{
        console.log('变化');

      }

        //点击气泡出来之后的删除按钮
  let shan = ()=>{
    console.log(1);
    setzhezi(true)

    setTimeout(()=>{
        setzhezi(false)
    },3000)

    setinp_inp2(false)
    setbtnflag(false)

}

  //最顶部盒子的位置变化
  const [ zhezi , setzhezi ] = useState(false)


      //气泡里面的内容
  const content = (
    <div style={{cursor:'pointer'}}>
      <span onClick={shan}>删除</span>&emsp;&emsp;
      <span>取消</span>
    </div>
  );



  //删除事件
  let visit_del = (item:any)=>{

              dispatch({
                type:'dispatchlist2/visitdelete',
                payload:item.id
              })
              // console.log(item.id);
              // alert(item.id)
                    window.location.reload()
  }




  return (
    <div>
       <div className={ zhezi ? 'zuiding' : 'zuiding2' }><span>!</span> 访客无权进行该操作</div>

          <h3><span>工作台/</span>访问统计</h3>

          {/* 头部inp框 */}
          <div className="visit_inp">
                          {/* 第一个ul  */}
                        <ul className='visit_ul1'>
                                  <li>IP: <input type="text" placeholder='请输入IP地址'/></li>
                                  <li>UA: <input type="text" placeholder='请输入User Agent'/></li>
                                  <li>URL: <input type="text" placeholder='请输入URL'/></li>
                                  <li>地址: <input type="text" placeholder='请输入地址'/></li>
                        </ul>

                                  {/* 第二个ul  */}
                        <ul className='visit_ul2'>

                                  <li>浏览器: <input type="text" placeholder='请输入浏览器'/></li>
                                  <li>内核: <input type="text" placeholder='请输入内核'/></li>
                                  <li>OS: <input type="text" placeholder='请输入操作系统'/></li>
                                  <li>设备: <input type="text" placeholder='请输入设备'/></li>
                        </ul>

                        <span className='visit_span2'>重置</span>
                        <span className='visit_span1'>搜索</span>
          </div>


           {/* 内容 */}

           <div className="visit_list">
           {
                    btnflag ?


                      <Popover content={content} title="请选择你的操作" className='shanchu_anniu' >
                    <Button type="primary">删除</Button>
                  </Popover>    : ''
                  }
                          <ul className='visit_list_ul1'>
                                    <li className='visit_list_ul1_li1'>
                                      <input type="checkbox"   onChange={inp2}/> URL</li>
                                    <li className='visit_list_ul1_li2'>IP</li>
                                    <li>浏览器</li>
                                    <li>内核</li>
                                    <li>操作系统</li>
                                    <li>设备</li>
                                    <li>地址</li>
                                    <li>访问量</li>
                                    <li>操作</li>
                          </ul>



                          {/* 内容展示 */}


                          <ul className='visit_ul3'>
                            {
                              list[0] && list[0].map((item:any,index:number)=>{
                                return <li key={index}>
                                  <span className='visit_url'>
                                    <input type="checkbox"  className='inpding' checked={inp_inp2} onChange={inp3} />{item.url}</span>
                                  <span className='visit_url'>{item.ip}</span>
                                  <span>{item.browser}</span>
                                  <span>{item.engine}</span>
                                  <span className='visit_url2'>{item.os}</span>
                                  <span>{item.device}</span>
                                  <span>{item.address}</span>
                                  <span>{item.count}</span>
                                  <span onClick={()=>{visit_del(item)}}>删除</span>
                                </li>
                              })
                            }
                          </ul>
           </div>



    </div>
  )
}

// export default Index
export default connect(({dispatchlist2}:any)=>dispatchlist2)(Index);
